import React from "react";
import { Card, Space } from "antd";
import UserAvatarWithName from "../components/UserAvatarWithName";

const UserAvatarWithNameDemo: React.FC = () => {
  const users = [
    { name: "张三", avatar: "" },
    { name: "李四", avatar: "https://via.placeholder.com/40" },
    { name: "王五", avatar: "1" },
    { name: "赵六", avatar: "2" },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Card title="用户头像和用户名组件">
        <Space direction="vertical" size="large" style={{ width: "100%" }}>
          {users.map((user, index) => (
            <UserAvatarWithName
              key={index}
              name={user.name}
              avatar={user.avatar}
              size="default"
              shape="circle"
            />
          ))}
        </Space>
      </Card>
    </div>
  );
};

export default UserAvatarWithNameDemo;
